<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>门禁二维码生成器</title>
    <script src="https://unpkg.com/qrcode@1.5.3/build/qrcode.min.js"></script>
    <script>
        // 备用CDN加载
         window.qrCodeLibLoaded = false;
         
         // 检查主库是否加载成功
         function checkMainLibrary() {
             if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
                 window.qrCodeLibLoaded = true;
                 console.log('主QRCode库加载成功');
                 return true;
             }
             return false;
         }
         
         // 如果主库未加载，尝试备用库
         if (!checkMainLibrary()) {
             const script = document.createElement('script');
             script.src = 'https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js';
             script.onload = function() {
                 if (typeof QRious !== 'undefined') {
                     window.qrCodeLibLoaded = true;
                     window.useQRious = true;
                     console.log('备用QRious库加载成功');
                     // 重新生成二维码
                     setTimeout(() => {
                         if (typeof generateQRCode === 'function' && typeof storeData !== 'undefined') {
                             generateQRCode('qrCanvas1', storeData.store1);
                             generateQRCode('qrCanvas2', storeData.store2);
                         }
                     }, 100);
                 }
             };
             document.head.appendChild(script);
         } else {
             window.qrCodeLibLoaded = true;
         }
    </script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .store-section {
            margin-bottom: 40px;
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            background-color: #fafafa;
        }
        .store-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }
        .qr-container {
            text-align: center;
            margin: 20px 0;
        }
        .store-info {
            background: white;
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
            font-size: 14px;
            line-height: 1.6;
        }
        .info-item {
            margin-bottom: 8px;
        }
        .info-label {
            font-weight: bold;
            color: #34495e;
            display: inline-block;
            width: 80px;
        }
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin: 10px 5px;
            transition: transform 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
        }
        .json-data {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            word-break: break-all;
            color: #495057;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔐 门禁二维码生成器</h1>
        
        <!-- 蓝光店 -->
        <div class="store-section">
            <div class="store-title">超级泡泡蓝光店</div>
            <div class="qr-container">
                <canvas id="qrCanvas1" style="border: 1px solid #ddd;"></canvas>
            </div>
            <div class="store-info">
                <div class="info-item">
                    <span class="info-label">门店ID：</span>1
                </div>
                <div class="info-item">
                    <span class="info-label">门店名称：</span>超级泡泡蓝光店
                </div>
                <div class="info-item">
                    <span class="info-label">MQTT主题：</span>device/store_001/access_control_001/control
                </div>
            </div>
            <div style="text-align: center;">
                <button onclick="downloadQR('qrCanvas1', '门禁二维码_超级泡泡蓝光店')">下载PNG</button>
                <button onclick="toggleJson('json1')">显示/隐藏二维码数据</button>
            </div>
            <div id="json1" class="json-data" style="display: none;"></div>
        </div>
        
        <!-- 光年店 -->
        <div class="store-section">
            <div class="store-title">超级泡泡光年店</div>
            <div class="qr-container">
                <canvas id="qrCanvas2" style="border: 1px solid #ddd;"></canvas>
            </div>
            <div class="store-info">
                <div class="info-item">
                    <span class="info-label">门店ID：</span>2
                </div>
                <div class="info-item">
                    <span class="info-label">门店名称：</span>超级泡泡光年店
                </div>
                <div class="info-item">
                    <span class="info-label">MQTT主题：</span>device/store_002/access_control_002/control
                </div>
            </div>
            <div style="text-align: center;">
                <button onclick="downloadQR('qrCanvas2', '门禁二维码_超级泡泡光年店')">下载PNG</button>
                <button onclick="toggleJson('json2')">显示/隐藏二维码数据</button>
            </div>
            <div id="json2" class="json-data" style="display: none;"></div>
        </div>
        
        <div style="text-align: center; margin-top: 30px; color: #666; font-size: 14px;">
            <p>📱 请使用超级泡泡小程序扫描二维码进行门禁开门</p>
            <p>🔧 生成的二维码包含完整的门店和设备信息</p>
        </div>
    </div>

    <script>
        // 门店数据（精简版，移除storeName避免中文编码问题）
        const storeData = {
            store1: {
                type: 'access_control',
                storeId: '1',
                topic: '/CPHgXm/kHKxitSJhWTz/8cce4e518bf9/publish'
            },
            store2: {
                type: 'access_control',
                storeId: '2',
                topic: '/CPHgXm/kHKxitSJhWTz/8cce4e518bf9/publish'
            }
        };

        // 生成二维码
        function generateQRCode(canvasId, data) {
            const canvas = document.getElementById(canvasId);
            const jsonData = JSON.stringify(data);
            
            // 显示JSON数据
            const jsonId = canvasId === 'qrCanvas1' ? 'json1' : 'json2';
            document.getElementById(jsonId).textContent = jsonData;
            
            try {
                if (window.useQRious && typeof QRious !== 'undefined') {
                    // 使用QRious库
                    const qr = new QRious({
                        element: canvas,
                        value: jsonData,
                        size: 300,
                        background: '#FFFFFF',
                        foreground: '#000000'
                    });
                    console.log('二维码生成成功! (QRious)');
                } else if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
                    // 使用qrcode库
                    QRCode.toCanvas(canvas, jsonData, {
                        width: 300,
                        height: 300,
                        margin: 2,
                        color: {
                            dark: '#000000',
                            light: '#FFFFFF'
                        }
                    }, function (error) {
                        if (error) {
                            console.error('二维码生成失败:', error);
                            showErrorOnCanvas(canvas, '二维码生成失败: ' + error.message);
                        } else {
                            console.log('二维码生成成功! (QRCode)');
                        }
                    });
                } else if (!window.qrCodeLibLoaded) {
                    // 库还在加载中
                    showErrorOnCanvas(canvas, 'QRCode库加载中...', '请稍候或刷新页面重试');
                } else {
                    // 库加载失败
                    showErrorOnCanvas(canvas, 'QRCode库加载失败', '请检查网络连接并刷新页面');
                }
            } catch (error) {
                console.error('二维码生成异常:', error);
                showErrorOnCanvas(canvas, '二维码生成异常', error.message);
            }
        }
        
        // 在画布上显示错误信息
        function showErrorOnCanvas(canvas, message1, message2) {
            const ctx = canvas.getContext('2d');
            canvas.width = 300;
            canvas.height = 300;
            ctx.fillStyle = '#f0f0f0';
            ctx.fillRect(0, 0, 300, 300);
            ctx.fillStyle = '#666';
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(message1, 150, 140);
            if (message2) {
                ctx.fillText(message2, 150, 160);
            }
        }

        // 下载二维码
        function downloadQR(canvasId, filename) {
            try {
                const canvas = document.getElementById(canvasId);
                if (!canvas) {
                    alert('找不到二维码画布');
                    return;
                }
                
                const link = document.createElement('a');
                link.download = filename + '.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
                
                console.log('二维码下载成功:', filename);
            } catch (error) {
                console.error('下载失败:', error);
                alert('下载失败: ' + error.message);
            }
        }

        // 切换JSON显示
        function toggleJson(jsonId) {
            const element = document.getElementById(jsonId);
            element.style.display = element.style.display === 'none' ? 'block' : 'none';
        }

        // 页面加载完成后生成二维码
        window.onload = function() {
            generateQRCode('qrCanvas1', storeData.store1);
            generateQRCode('qrCanvas2', storeData.store2);
        };
    </script>
</body>
</html>